import React from 'react';
import { Layout } from 'antd';
import { observer } from 'mobx-react';

// eslint-disable-next-line no-unused-vars
import { BlogInfo } from "../../store/blog";
import { useStores } from '../../store/store';
import RecentBlogs from './RecentBlogs';
import NewCommentCard from './NewCommentCard';
import Blogger from './Blogger';
import LabelList from './LabelList';

const { Sider } = Layout;

function BlogSider() {
    const { recentBlogs, newComments } = useStores('blogList') as BlogInfo;
    return (
        <Sider
            id="sider-container"
            width={240}
            theme="light"
        >
            <LabelList />
            <Blogger />
            <RecentBlogs recentBlogs={recentBlogs} />
            <NewCommentCard newComments={newComments} />
        </Sider>
    );
}

export default observer(BlogSider);
